import React, { useState, memo } from 'react';
import { Card, Button, Input, Upload, Row, Col, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { predictionWater, predictionParams } from '@/apis/ParamsPrediction'; // 引入接口请求
import { useSelector, useDispatch } from 'react-redux';
import { updateParamsData, updateWaterPrediction } from '@/store/modules/paramsSlice'; // Redux actions
import styles from './style.module.less';

const ParamsPrediction = () => {
  const dispatch = useDispatch();

  // 从 Redux 中获取状态
  const { predictedWater, dehydrationAmount, paramsData } = useSelector((state) => state.params);

  const [file, setFile] = useState(null); // 上传的文件
  const [inputWater, setInputWater] = useState(predictedWater); // 输入框的值，单独维护

  // 上传文件前校验（仅支持Excel文件）
  const beforeUpload = (file) => {
    const isExcel =
      file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
      file.type === 'application/vnd.ms-excel';
    if (!isExcel) {
      message.error('只能上传Excel文件(.xls或.xlsx)!');
      return Upload.LIST_IGNORE;
    }
    setFile(file);
    return false; // 不自动上传，手动控制上传
  };

  // 点击第一个开始预测按钮
  const handleFirstPrediction = async () => {
    if (!file) {
      message.warning('请先上传文件！');
      return;
    }

    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await predictionWater(formData); // 调用接口
      const { "预测物料水分值": predictedWaterValue, 脱水量: dehydration } = response.data;

      // 更新 Redux 状态，持久化来料水分和脱水量
      dispatch(updateWaterPrediction({ 
        predictedWater: predictedWaterValue.toFixed(2), 
        dehydrationAmount: dehydration.toFixed(2) 
      }));

      // 更新输入框的值
      setInputWater(predictedWaterValue.toFixed(2));
      message.success('预测完成！');
    } catch (error) {
      console.error('预测失败:', error);
      message.error('预测失败，请重试！');
    }
  };

  // 点击第二个开始预测按钮
  const handleSecondPrediction = async () => {
    if (!inputWater || !dehydrationAmount) {
      message.warning('请先完成并输入有效的预测值！');
      return;
    }

    const requestData = {
      "预测物料水分值": parseFloat(inputWater), // 使用输入框的值
      "脱水量": parseFloat(dehydrationAmount), // Redux 状态中的脱水量
    };

    try {
      const response = await predictionParams(requestData); // 调用接口
      const data = response.data;

      // 判断后端返回数据是否完整
      if (data && data["罩压力"] !== undefined) {
        dispatch(updateParamsData(data)); // 更新 Redux 状态
        message.success('烘丝机参数预测完成！');
      } else {
        message.error('烘丝机预测结果不完整，请检查后端返回数据！');
      }
    } catch (error) {
      console.error('烘丝机预测失败:', error);
      message.error('烘丝机预测失败，请重试！');
    }
  };

  return (
    <div className={styles.paramsPredictionContainer}>
      <Row gutter={16}>
        {/* 来料水分预测 */}
        <Col span={12}>
          <Card title="来料水分预测" className={styles.card}>
            <div className={styles.formGroup}>
              输入待测数据：
              <Upload beforeUpload={beforeUpload} showUploadList={true} maxCount={1}>
                <Button icon={<UploadOutlined />}>上传文件</Button>
              </Upload>
            </div>
            <Button type="primary" className={styles.button} onClick={handleFirstPrediction}>
              开始预测
            </Button>
            <div className={styles.result}>
              预测结果：<br /> 
              来料水分：{predictedWater !== null ? `${predictedWater}` : '尚未预测'}<br />
              脱水量：{dehydrationAmount !== null ? `${dehydrationAmount} kg` : '尚未预测'}
            </div>
          </Card>
        </Col>

        {/* 烘丝机参数预测 */}
        <Col span={12}>
          <Card title="烘丝机参数预测" className={styles.card}>
            <div className={styles.formGroup}>
              来料水分预测值：
              <Input
                value={inputWater} // 输入框的值单独维护
                onChange={(e) => setInputWater(e.target.value)} // 不影响 Redux 状态的 predictedWater
              />
            </div>
            <Button type="primary" className={styles.button} onClick={handleSecondPrediction}>
              开始预测
            </Button>
            <div className={styles.result}>
              预测结果：<br />
              罩压力：{paramsData["罩压力"] !== undefined ? `${paramsData["罩压力"].toFixed(2)} Pa` : '____'}&nbsp;&nbsp;
              热风风速：{paramsData["热风风速"] !== undefined ? `${paramsData["热风风速"].toFixed(2)} m/s` : '____'}<br />
              脱水量：{paramsData["脱水量"] !== undefined ? `${paramsData["脱水量"].toFixed(2)} kg` : '____'}&nbsp;&nbsp;
              滚筒温度：{paramsData["滚筒温度"] !== undefined ? `${paramsData["滚筒温度"].toFixed(2)} ℃` : '____'}
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export const MemoParamsPrediction = memo(ParamsPrediction);
